<!-- JSON EDITOR -->
<section class='box' id='json-editor'>
  <i class='fas fa-list mr-1 align-baseline'></i><h3 class='d-inline'>{{ 'JSON Editor'|trans }}</h3>
  <button class='button btn btn-primary plusMinusButton jsonEditorPlusMinusButton' data-toggle='collapse' data-target='#jsonEditorDiv' aria-expanded='false' aria-controls='jsonEditorDiv'>+</button>
  <div id='jsonEditorDiv' class='collapse mt-2'>
    <h6 id='jsonEditorTitle'></h6>
    <div id='jsonEditorContainer'></div>
    {% if mode == 'edit' %}
      <div class='submitButtonDiv'>
        <div class='btn-group'>
          <button type='button' class='btn btn-primary jsonSaver'>{{ 'Save'|trans }}</button>
          <div class='btn-group dropright' role='group'>
          <button type='button' class='btn btn-primary dropdown-toggle dropdown-toggle-split' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
            <span class='sr-only'>{{ 'Toggle JSON editor save menu'|trans }}</span>
          </button>
          <div class='dropdown-menu'>
            <a class='dropdown-item clickable jsonSaveAs'>{{ 'Save as'|trans }}</a>
            <a class='dropdown-item clickable jsonClear'>{{ 'Clear'|trans }}</a>
          </div>
          </div>
        </div>
      </div>
    {% endif %}
  </div>
</section>
<!-- Load the JSONEditor CSS -->
<link href='app/css/jsoneditor/jsoneditor.min.css' rel='stylesheet' type='text/css'>
